/* 组件在 layout 布局文件中引用，全局通过redux控制 */

import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Modal, Button } from 'antd';
import { useNavigate } from 'react-router-dom';

import { setLoginOpen } from '@/reducers/main';
import styles from './index.module.scss';
import { useTranslation } from 'react-i18next';

const ModalLogin = (props) => {
    const navigate = useNavigate(),
        dispatch = useDispatch(),
        mainStore = useSelector(store => store.main);
    const { t } = useTranslation();

    // 取消登录
    const onCancelLogin = () => {
        dispatch(setLoginOpen(false));
    };
    const toLogin = () => {
        onCancelLogin();
        navigate('/login');
    };

    return (
        <Modal
            className={styles['container']}
            open={mainStore?.showLoginModal}
            onCancel={onCancelLogin}
            width={374}
            destroyOnClose={true}
            maskClosable={false}
            title={t('login.text.expired.title')}
            footer={null}
        >
            <div className={styles['header']}>{t('login.text.expired.content')}</div>
            <div className={styles['footer']}>
                <Button onClick={onCancelLogin} style={{height:'40px', lineHeight:'40px'}}>{t('common.modal.button.cancel')}</Button>
                <Button type="primary" onClick={toLogin} className='custom-btn-primary'>{t('login.loginBtn')}</Button>
            </div>
        </Modal>
    )
}

export default ModalLogin;
